<script setup lang="ts">
  import { ref } from 'vue'
  import _ from 'lodash'
  import { useGetSourceOptionList } from '@/services/pages/order/useSoruce'
  import { RefreshRight } from '@element-plus/icons-vue'
  import { useGetCustomerServiceOptions } from '@/services/module/order/useList'
  import { useGetDepartmentOptions } from '@/services/module/department/useOptions'
  import useOrderModuleOptionListService from '@/services/module/order/useOrderModuleOptionListService'
  import useNetworkOptionListService from '@/services/module/network/useNetworkOptionListService'

  const {
    networkOptionList,
    getNetworkOptionListParam,
    getNetworkOptionListLoading,
    getNetworkOptionList,
  } = useNetworkOptionListService()
  const {
    orderModuleOptionList,
    getOrderModuleOptionListParam,
    getOrderModuleOptionListLoading,
    getOrderModuleOptionList,
  } = useOrderModuleOptionListService()
  const {
    optionList: sourceOptionList,
    getOptionListParam: getSourceOptionListParam,
    getOptionListLoading: getSourceOptionListLoading,
    getOptionList: getSourceOptionList,
  } = useGetSourceOptionList()
  const {
    customerServiceOptions,
    getCustomerServiceOptionsParam,
    getCustomerServiceOptionsLoading,
    getCustomerServiceOptions,
  } = useGetCustomerServiceOptions()
  const {
    options: departmentOptions,
    getOptionsLoading: getDepartmentOptionsLoading,
    getOptions: getDepartmentOptions,
  } = useGetDepartmentOptions()

  const emits = defineEmits<{
    (e: 'getList'): void
    (e: 'clear'): void
  }>()

  const filterForm = ref<OrderAPIRequest.GetList>({
    dateFieldType: 1,
    dateType: '',
    orderStartTime: '',
    orderEndTime: '',
    orderNo: '',
    goodsSearch: '',
    orderUserSearch: '',
    fieldSearch: '',
    fieldId: '',
    engineer: '',
    snCode: '',
    goodsCode: '',
    networkIds: [],
    workSourceIds: [],
    departmentId: '',
    empIds: [],
    sendForRepairPhone: '',
    sendForRepairUsername: '',
    otherOrderNo: '',
    buyPlatformOrderNo: '',
    agingFiltrate: '',
    childStatus: '',
    empType: '',
    limit: 50,
    maxServiceTime: '',
    minServiceTime: '',
    moduleIds: [],
    networkType: '',
    orderNodeTimeoutType: '',
    orderStatus: [],
    page: 1,
    serviceTimeType: '',
    sources: [],
    sql: '',
    status: '',
    userArea: '',
    userCity: '',
    userProvince: '',
    workLevelIds: [],
  })
  const dateRange = ref<Array<string>>([])

  const onDateTypeChange = () => {
    const { dateType } = filterForm.value
    if (dateType === 2 || dateType === 3 || dateType === 4) {
      emits('getList')
    }
  }

  const handleCustomerServiceOptionsSearch = _.debounce((keyword: string) => {
    getCustomerServiceOptionsParam.value.name = keyword
    getCustomerServiceOptions()
  })

  const onReset = () => {
    dateRange.value.length = 0
    filterForm.value = {
      dateFieldType: 1,
      dateType: '',
      orderStartTime: '',
      orderEndTime: '',
      orderNo: '',
      goodsSearch: '',
      orderUserSearch: '',
      fieldSearch: '',
      fieldId: '',
      engineer: '',
      snCode: '',
      goodsCode: '',
      networkIds: [],
      workSourceIds: [],
      departmentId: '',
      empIds: [],
      sendForRepairPhone: '',
      sendForRepairUsername: '',
      otherOrderNo: '',
      buyPlatformOrderNo: '',
      agingFiltrate: '',
      childStatus: '',
      empType: '',
      limit: 50,
      maxServiceTime: '',
      minServiceTime: '',
      moduleIds: [],
      networkType: '',
      orderNodeTimeoutType: '',
      orderStatus: [],
      page: 1,
      serviceTimeType: '',
      sources: [],
      sql: '',
      status: '',
      userArea: '',
      userCity: '',
      userProvince: '',
      workLevelIds: [],
    }
    emits('getList')
    emits('clear')
  }

  const handleGetNetworkOptions = _.throttle((keyword: string) => {
    getNetworkOptionListParam.value.name = keyword
    getNetworkOptionList()
  }, 600)

  const handleSourceFilter = _.throttle((keyword: string) => {
    getSourceOptionListParam.value.name = keyword
    getSourceOptionList()
  }, 600)

  const handleOrderModuleOptionListSearch = _.throttle((keyword: string) => {
    getOrderModuleOptionListParam.value.name = keyword
    getOrderModuleOptionList()
  }, 600)

  const handleDateRangeChange = () => {
    filterForm.value.orderStartTime = ''
    filterForm.value.orderEndTime = ''
    if (dateRange.value && dateRange.value.length === 2) {
      filterForm.value.orderStartTime = dateRange.value[0]
      filterForm.value.orderEndTime = dateRange.value[1]
    }
    emits('getList')
  }

  defineExpose({
    getFilter: () => {
      return { ...filterForm.value }
    },
    reset: onReset,
    setDateType: (type: 'today' | 'week' | 'month') => {
      switch (type) {
        case 'today':
          filterForm.value.dateType = 2
          break
        case 'week':
          filterForm.value.dateType = 3
          break
        case 'month':
          filterForm.value.dateType = 4
          break
      }
    },
    getSourceOptionList,
    getDepartmentOptionsLoading,
    getDepartmentOptions,
  })
</script>

<template>
  <div class="filter">
    <!-- 时间字段类型 -->
    <el-select v-model="filterForm.dateFieldType" placeholder="下单日期" class="filter-item">
      <el-option label="报单日期" :value="1" />
      <el-option label="完工日期" :value="2" />
      <!-- <el-option label="结算日期" :value="3" /> -->
    </el-select>

    <!--选择时间-->
    <el-select
      v-model="filterForm.dateType"
      placeholder="选择时间"
      class="filter-item"
      clearable
      @change="onDateTypeChange"
      @clear="emits('getList')"
    >
      <el-option label="今天" :value="2" />
      <el-option label="本周" :value="3" />
      <el-option label="本月" :value="4" />
      <el-option label="自定义时间" :value="1" />
    </el-select>

    <!--日期范围-->
    <el-date-picker
      v-if="filterForm.dateType === 1"
      v-model="dateRange"
      type="daterange"
      :unlink-panels="true"
      value-format="YYYY-MM-DD"
      range-separator="到"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      style="width: 100px"
      @change="handleDateRangeChange"
    />

    <!-- 工单类型 -->
    <el-select
      v-model="filterForm.moduleIds"
      multiple
      collapse-tags
      collapse-tags-tooltip
      placeholder="工单类型"
      class="filter-item"
      filterable
      :loading="getOrderModuleOptionListLoading"
      :filter-method="handleOrderModuleOptionListSearch"
      @change="emits('getList')"
      @clear="emits('getList')"
    >
      <el-option
        v-for="item in orderModuleOptionList"
        :key="item.id"
        :value="item.id"
        :label="item.name"
      />
    </el-select>

    <!-- 工单状态 -->
    <el-select
      v-model="filterForm.orderStatus"
      multiple
      collapse-tags
      collapse-tags-tooltip
      filterable
      placeholder="工单状态"
      class="filter-item"
      @change="emits('getList')"
      @clear="emits('getList')"
    >
      <el-option label="待派单" :value="1" />
      <el-option label="待网点确认" :value="2" />
      <el-option label="处理中" :value="3" />
      <el-option label="已完成" :value="4" />
      <el-option label="已取消" :value="5" />
    </el-select>

    <!-- 工单网点 -->
    <el-select
      v-model="filterForm.networkIds"
      multiple
      collapse-tags
      collapse-tags-tooltip
      placeholder="网点"
      class="filter-item"
      filterable
      :filter-method="handleGetNetworkOptions"
      :loading="getNetworkOptionListLoading"
      @change="emits('getList')"
      @clear="emits('getList')"
    >
      <el-option
        v-for="item in networkOptionList"
        :key="item.id"
        :value="item.id"
        :label="item.name"
      >
        <div style="display: flex; column-gap: 5px; padding-right: 32px">
          <h-tooltip-text :text="item.name" :max-width="160" :height="32" />
          <span style="color: #999; font-size: 12px">
            {{ item.code }}
          </span>
        </div>
      </el-option>
    </el-select>

    <!-- 工单来源 -->
    <el-select
      v-model="filterForm.workSourceIds"
      multiple
      collapse-tags
      collapse-tags-tooltip
      placeholder="工单来源"
      class="filter-item"
      :loading="getSourceOptionListLoading"
      filterable
      :filter-method="handleSourceFilter"
      @change="emits('getList')"
      @clear="emits('getList')"
    >
      <el-option
        v-for="item in sourceOptionList.filter((item) => !item.disabled)"
        :key="item.id"
        :value="item.id"
        :label="item.name"
      />
    </el-select>

    <!-- 客服 -->
    <el-select
      v-model="filterForm.empIds"
      multiple
      placeholder="请选择客服"
      class="filter-item"
      filterable
      clearable
      :filter-method="handleCustomerServiceOptionsSearch"
      :loading="getCustomerServiceOptionsLoading"
      @change="emits('getList')"
      @clear="emits('getList')"
    >
      <el-option
        v-for="(customerServiceOption, customerServiceOptionIndex) in customerServiceOptions"
        :key="customerServiceOptionIndex"
        :value="customerServiceOption.id"
        :label="customerServiceOption.name"
        :disabled="customerServiceOption.disabled"
      />
    </el-select>

    <!-- 部门 -->
    <el-select
      v-model="filterForm.departmentId"
      placeholder="请选择部门"
      class="filter-item"
      clearable
      @change="emits('getList')"
      @clear="emits('getList')"
    >
      <el-option
        v-for="(departmentOption, departmentOptionIndex) in departmentOptions"
        :key="departmentOptionIndex"
        :value="departmentOption.id"
        :label="departmentOption.name"
        :disabled="!!departmentOption.disabled"
      />
    </el-select>

    <!-- 完工时效 -->
    <el-select
      v-model="filterForm.agingFiltrate"
      placeholder="请选择完工时效"
      class="filter-item"
      clearable
      @change="emits('getList')"
      @clear="emits('getList')"
    >
      <el-option :value="24" label="超过24小时" />
      <el-option :value="48" label="超过48小时" />
      <el-option :value="72" label="超过72小时" />
      <el-option :value="96" label="超过96小时" />
    </el-select>

    <!-- 产品名称/型号 -->
    <el-input
      v-model.trim="filterForm.goodsSearch"
      clearable
      placeholder="产品名称/型号"
      class="filter-item"
      @keyup.enter="emits('getList')"
      @clear="emits('getList')"
    />

    <!--关键字-->
    <!-- <el-input
      v-model.trim="filterForm.fieldSearch"
      clearable
      placeholder="关键字"
      style="width: 220px"
      @keyup.enter="emits('getList')"
      @clear="emits('getList')"
    >
      <template #prepend>
        <el-select
          v-model="filterForm.fieldId"
          clearable
          class="item-select"
          placeholder="自助查询"
          style="width: 110px"
          @clear="emits('getList')"
        >
          <el-option
            v-for="item in customFiledOptional"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </template>
    </el-input> -->

    <!-- 产品编号 -->
    <el-input
      v-model.trim="filterForm.goodsCode"
      clearable
      placeholder="产品编号"
      class="filter-item"
      input-style="font-weight: bold;"
      @keyup.enter="emits('getList')"
      @clear="emits('getList')"
    />

    <!-- 工单编号 -->
    <el-input
      v-model.trim="filterForm.orderNo"
      class="filter-item"
      clearable
      placeholder="工单编号"
      input-style="font-weight: bold;"
      @keyup.enter="emits('getList')"
      @clear="emits('getList')"
    />

    <!-- 条码 -->
    <el-input
      v-model.trim="filterForm.snCode"
      clearable
      placeholder="条码"
      class="filter-item"
      input-style="font-weight: bold;"
      @keyup.enter="emits('getList')"
      @clear="emits('getList')"
    />

    <!-- 客户名称/手机号/地址 -->
    <el-input
      v-model.trim="filterForm.orderUserSearch"
      clearable
      placeholder="客户名称/手机号/地址"
      class="filter-item"
      input-style="font-weight: bold;"
      @keyup.enter="emits('getList')"
      @clear="emits('getList')"
    />

    <!--搜索工程师名称/手机号-->
    <el-input
      v-model.trim="filterForm.engineer"
      clearable
      placeholder="工程师名称/手机号"
      class="filter-item"
      input-style="font-weight: bold;"
      @keyup.enter="emits('getList')"
      @clear="emits('getList')"
    />

    <!--反馈人名称-->
    <el-input
      v-model.trim="filterForm.sendForRepairUsername"
      clearable
      placeholder="反馈人名称"
      class="filter-item"
      input-style="font-weight: bold;"
      @keyup.enter="emits('getList')"
      @clear="emits('getList')"
    />

    <!--反馈人手机号-->
    <el-input
      v-model.trim="filterForm.sendForRepairPhone"
      clearable
      placeholder="反馈人手机号"
      class="filter-item"
      input-style="font-weight: bold;"
      @keyup.enter="emits('getList')"
      @clear="emits('getList')"
    />

    <!--平台订单号-->
    <!-- <el-input
      v-model.trim="filterForm.buyPlatformOrderNo"
      clearable
      placeholder="平台订单号"
      style="width: 120px"
      input-style="font-weight: bold;"
      @keyup.enter="emits('getList')"
      @clear="emits('getList')"
    /> -->

    <!--第三方工单号-->
    <!-- <el-input
      v-model.trim="filterForm.otherOrderNo"
      clearable
      placeholder="第三方工单号"
      style="width: 140px"
      input-style="font-weight: bold;"
      @keyup.enter="emits('getList')"
      @clear="emits('getList')"
    /> -->

    <h-button type="primary" @click="emits('getList')">
      <el-icon>
        <Search />
      </el-icon>
      搜索
    </h-button>

    <h-button @click="onReset">
      <el-icon>
        <RefreshRight />
      </el-icon>
      重置
    </h-button>
  </div>
</template>

<style scoped lang="scss">
  :deep(.el-date-editor) {
    height: 28px !important;
  }

  .filter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;

    .filter-item {
      width: 180px;

      :deep(.el-tag) {
        max-width: 80px !important;
      }
    }
  }

  :deep(.el-input__inner) {
    &::placeholder {
      color: #606266;
    }
  }

  :deep(.el-select__placeholder) {
    color: #606266;
  }
</style>
